(function($){    
    //将图片再次旋转指定角度.
    var _rotateImg = function(deg) {                
        var deg = deg + 3600,   //同等转化.
            imgDeg = $(this).attr('deg') || 0, 
            nextImgDeg = ( parseInt(imgDeg) + deg ) % 360,
            imgWidth = $(this).outerWidth(),
            imgHeight = $(this).outerHeight();
            translate = '0px, 0px';
            
        if(nextImgDeg == 90){
            translate = '0px,' + -imgHeight + 'px';
        }
        if(nextImgDeg == 180){
            translate = -imgWidth + 'px, ' + -imgHeight + 'px';
        }
        if(nextImgDeg == 270){
            translate = -imgWidth + 'px, 0px';
        }   
        
        if($.browser.webkit){
            $(this).attr( 'deg', nextImgDeg )
                .css('-webkit-transform-origin', '0px 0px')
                .css('-webkit-transform', 'rotate(' + nextImgDeg + 'deg) translate(' + translate + ')');
        } else if($.browser.mozilla){
            $(this).attr( 'deg', nextImgDeg )
                .css('-moz-transform-origin', '0px 0px')
                .css('-moz-transform', 'rotate(' + nextImgDeg + 'deg) translate(' + translate + ')');
        } else if($.browser.msie ){
            $(this).attr( 'deg', nextImgDeg )
                .css('-ms-transform-origin', '0px 0px')
                .css('-ms-transform', 'rotate(' + nextImgDeg + 'deg) translate(' + translate + ')');
        } else {
            $(this).attr( 'deg', nextImgDeg )
                .css('transform-origin', '0px 0px')
                .css('transform', 'rotate(' + nextImgDeg + 'deg) translate(' + translate + ')');
        }
    };
    
    //------------------------------------------------------------------------------------------------
    
    $.fn.imageEditor = function() {        
        $(this).each(function() {
            var $img = $(this), 
                $imgWrapper = $('<div class="imageEditor"></div>');
                
            $img.wrap($imgWrapper);
            
            $img.bind( 'mousemove', function(e) {
                var _this = $(this), 
                    imgPos = _this.offset(), 
                    imgWidth = _this.outerWidth();
                    
                if ( e.pageX < ( imgPos.left + imgWidth / 2 ) ) {
                    _this.addClass('rotateAntiClockwize').removeClass('rotateClockwize');
                } else {
                    _this.addClass('rotateClockwize').removeClass('rotateAntiClockwize');
                }
            } ).bind('click', function() {
                _rotateImg.call(this, $(this).hasClass('rotateClockwize') ? 90 : -90);
            });
            
            $img.after([
                '<div class="imageEditorToolbar">', 
                    '<button class="rotateAntiClockwizeBtn"></button>', 
                    '<button class="rotateClockwizeBtn"></button>', 
                '</div>'
            ].join('')).next().find('button').click(function() {
                _rotateImg.call($img, $(this).hasClass('rotateClockwizeBtn') ? 90 : -90);
            });
        });
    };    
})(jQuery);